<template>
  <!-- 对话框 -->
  <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleClose">
    <el-row>
      <el-col :span="12">姓名：{{ reviewInfo.name }}</el-col>
      <el-col :span="12">电话：{{ reviewInfo.phone }}</el-col>
    </el-row>
    <el-row>
      <el-col :span="12">身份证号：{{ reviewInfo.idCard }}</el-col>
      <el-col :span="12">
        <span>审核状态：{{ reviewInfo.auditStatus }}</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <span>身份证正面图：</span>
        <el-image class="img-style" :src="reviewInfo.idCardFrontImage" alt="" fit="cover"
          @click="openPreview(reviewInfo.idCardFrontImage, 0)">
        </el-image>
      </el-col>
      <el-col :span="12">
        <span>身份证反面图：</span>
        <el-image class="img-style" :src="reviewInfo.idCardReverseImage" alt="" fit="cover"
          @click="openPreview(reviewInfo.idCardReverseImage, 1)">
        </el-image>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">地址：{{ reviewInfo.address }}</el-col>
      <el-col :span="12">小区：{{ reviewInfo.community }}</el-col>
    </el-row>
    <el-row v-if="title === '审核'">
      <el-col :span="12" style="display: flex;">
        <span>负责区域：</span>
        <area-select size="small" :level="2" :placeholders="['选择省', '选择市', '选择区']" type="text" v-model="selected"
          :data="areaData" @change="changeArea"></area-select>
      </el-col>
      <el-col :span="12">
        <span>小区：</span>
        <el-select v-if="isShowSelected" size="small" v-model="body.regionCode" placeholder="请选择">
          <el-option v-for="(item, index) in communityOption" :key="index" :label="item.name"
            :value="item.code"></el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row v-if="reviewInfo.auditStatus !== '审核中'">
      <el-col :span="12">审核备注：{{ reviewInfo.auditRemark }}</el-col>
    </el-row>
    <el-form v-if="title === '审核'" :inline="true" size="small">
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否通过:">
            <el-radio v-model="body.auditStatus" label="2">是</el-radio>
            <el-radio v-model="body.auditStatus" label="3">否</el-radio>
          </el-form-item>
        </el-col>
        <el-col v-if="body.auditStatus === '3'" :span="12">
          <el-form-item label="原因:">
            <el-input v-model="body.auditRemark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" v-if="title === '审核'">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>

    <!-- 预览对话框，无遮罩层 -->
    <el-dialog :visible.sync="previewVisible" :title="previewTitle" :modal="false" :close-on-click-modal="false">
      <el-image :src="previewImage" fit="contain"></el-image>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { updateAuditApi } from "@/api/orderreview/reviewlist"
import { pcaa } from 'area-data'
import { getCommunityListApi } from "@/api/expandarea/expandarealist"

export default {
  name: "ReviewDialog",
  props: ['title', 'dialogVisible', 'reviewInfo'],
  data() {
    return {
      body: {
        id: '',
        auditStatus: '',
        auditRemark: '',
        regionCode: ''
      },
      isShow: false,
      previewVisible: false,
      previewImage: '',
      previewTitle: '',
      areaData: {},
      selected: [],
      communityOption: [],
      queryBody: {
        parentName: "",  //地址
      },
      isShowSelected: true
    }
  },
  computed: {
    requestBody() {
      return Object.fromEntries(
        Object.entries(this.body).filter(
          ([_, value]) => value !== null && value !== ''
        )
      );
    }
  },
  methods: {
    // 获取小区列表
    async getCommunityList() {
      if (this.selected) {
        this.queryBody.parentName = this.selected.join('')
      }
      const res = await getCommunityListApi(this.queryBody)
      if (res.code === 200) {
        this.communityOption = res.rows
        console.log(this.communityOption)
      }
    },
    changeArea() {
      this.getCommunityList()
    },
    handleClose() {
      const data = {
        dialogVisible: false,
        reviewInfo: {}
      }
      this.$emit('close', data);
      this.clearInput()
    },
    async updateAudit(obj) {
      const res = await updateAuditApi(obj)
      if (res.code === 200) {
        this.$message.success(res.msg)
      }
    },
    clearInput() {
      this.isShow = false
      this.resetForm("formRef")
      this.body = {
        id: '',
        auditStatus: '',
        auditRemark: '',
        regionCode: ''
      }
      // this.isShowSelected = false; // 隐藏选择器
      // this.$nextTick(() => {
      //   this.isShowSelected = true; // 重新显示选择器，强制重新渲染
      // });
    },

    cancel() {
      this.handleClose()
    },
    submit() {
      this.body.id = this.reviewInfo.id
      this.updateAudit(this.requestBody)
      this.handleClose()
    },
    openPreview(imageUrl, value) {
      this.previewImage = imageUrl;
      if (value === 0) {
        this.previewTitle = '身份证正面预览图';
      } else {
        this.previewTitle = '身份证反面预览图';
      }
      this.previewVisible = true;
    }
  },
  created() {
    this.areaData = pcaa
    // 增加新的区
    this.areaData['440300']['440309'] = '龙华区'
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 10px;

  &:last-child {
    margin-bottom: 0;
  }
}

.img-style {
  width: 120px;
  height: 60px;
  object-fit: contain;
  display: block;
  margin-top: 8px;
  cursor: pointer;
  /* 鼠标悬停时显示为手型 */
}

.el-image {
  display: block;
}

::v-deep .area-select.small {
  width: 98px;
}

::v-deep .area-select .area-selected-trigger {
  padding-top: 6px;
}

::v-deep .el-input--small .el-input__inner {
  width: 120px;
}
</style>
